﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>编制询价书</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link href="js/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <table style="line-height: 30px" cellspacing="1" cellpadding="0" width="100%" bgcolor="#336699" bordercolorlight="#006699" border="0">
        <tbody>
        <tr>
            <td>
                <table cellspacing="1" cellpadding="3" width="100%" border="0">
                    <tbody>
                    <tr bgcolor="#ffffff">
                        <td align="middle" width="100%" bgcolor="#ffffff" colspan="20" height="22">
                            <b>
                                <h2><font color="#0070c0">编制询价书</font></h2>
                            </b>
                            <a onclick="window.open('../help/Help.asp?Value=询价书明细信息','child','status=NO,scrollbars=yes,toolbar=no,menubar=no,location=no,left=200,top=100,width=700,height=400')" href="javascript:void(null)">
                                <img alt="帮助" src="img/help_a.gif" border="0">
                            </a>
                        </td>
                    </tr>
                    <tr class="t1">
                        <td nowrap width="20%">询价书编号</td>
                        <td class="t2" nowrap>{{ getValue('ENQUIRE_NUM') }}</td>
                        <td nowrap width="20%">询价书名称</td>
                        <td class="t2" nowrap><input type="text" v-model="ENQUIRE_NAME"></td>
                    </tr>
                    <tr class="t1">
                        <td nowrap width="20%">单位</td>
                        <td class="t2" nowrap>{{ getValue('COMPANY') }}</td>
                        <td nowrap width="20%">联系人</td>
                        <td class="t2" nowrap><input type="text" v-model="LINKMAN"></td>
                    </tr>
                    <tr class="t1">
                        <td nowrap width="20%">联系地址</td>
                        <td class="t2" nowrap><input type="text" v-model="ADDRESS"></td>
                        <td nowrap width="20%">联系电话</td>
                        <td class="t2" nowrap><input type="text" v-model="PHONE"></td>
                    </tr>
                    <tr class="t1">
                        <td nowrap width="20%">联系传真</td>
                        <td class="t2" nowrap><input type="text" v-model="FAX"></td>
                        <td nowrap width="20%">邮编</td>
                        <td class="t2" nowrap><input type="text" v-model="ZIP"></td>
                    </tr>
                    <tr class="t1">
                        <td nowrap width="20%">Email</td>
                        <td class="t2" nowrap><input type="text" v-model="EMAIL"></td>
                        <td nowrap width="20%">报价截止时间</td>
                        <td class="t2" nowrap><input type="date" v-model="END_DATE"></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>

    <table cellspacing="1" cellpadding="0" width="100%" bgcolor="#ffffff" bordercolorlight="#ffffff" border="0">
        <tbody>
        <tr>
            <td>
                <table cellspacing="1" cellpadding="3" width="100%" border="0">
                    <b>我公司欲采购下述物资，如贵单位有兴趣，可参与网上报价。详细物资情况如下：</b>
                    <tbody></tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>

    <table style="line-height: 30px" cellspacing="1" cellpadding="0" width="100%" bgcolor="#336699" bordercolorlight="#006699" border="0">
        <tr>
            <td>
                <table cellpadding="3" cellspacing="1" border="0" width="100%">
                    <tr>
                        <td colspan="6" align="middle" bgcolor="#99ccff"><b>需求计划1</b></td>
                    </tr>
                    <tr class="t2">
                        <td>物资编码</td>
                        <td>{{ getValue('MATERIAL_CODE') }}</td>
                        <td>物资名称</td>
                        <td>{{ getValue('MATERIAL_NAME') }}</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="t2">
                        <td>计量单位</td>
                        <td>{{ getValue('MEASURE_UNIT') }}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>单价(元/含税)</td>
                        <td nowrap><input type="text" v-model="UNIT_PRICE"></td>
                        <td nowrap>数量</td>
                        <td nowrap><input type="text" v-model="AMOUNT"></td>
                        <td nowrap>总价(元/含税)</td>
                        <td nowrap>{{ totalPrice }}</td>
                    </tr>
                    <tr bgcolor="#FFFFFF">
                        <td nowrap>报价开始时间</td>
                        <td nowrap><input type="date" v-model="START_DATE"></td>
                        <td nowrap>报价截止时间</td>
                        <td nowrap><input type="date" v-model="END_DATE"></td>
                        <td nowrap></td>
                        <td nowrap></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table style="line-height: 30px" cellspacing="1" cellpadding="0" width="100%" bgcolor="#336699" bordercolorlight="#006699" border="0">
        <tr>
            <td>
                <table cellpadding="3" cellspacing="1" border="0" width="100%">
                    <tr class="t2">
                        <td nowrap>询价说明</td>
                        <td colspan="3" style="width:100%"><textarea v-model="REMARK" rows="4" style="width:100%"></textarea></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <p align="right"><b>谢谢合作</b><br><b>株洲南车时代电气股份有限公司</b></p>
    <center>
        <br>
        <input id="button2" type="button" value="发布" @click="confirmSubmit">
        <input id="button2" type="button" value="确定" @click="confirmSubmit">
        <input id="button1" type="button" value="返回" @click="goBack">
    </center>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            END_DATE: '', // 报价截止时间
            UNIT_PRICE: '', // 单价
            AMOUNT: '', // 数量
            START_DATE: '', // 报价开始时间
            REMARK: '', // 询价说明
            ENQUIRE_NAME: '', // 询价书名称
            LINKMAN: '', // 联系人
            ADDRESS: '', // 联系地址
            PHONE: '', // 联系电话
            FAX: '', // 联系传真
            ZIP: '', // 邮编
            EMAIL: '', // Email
            Map: {} // 初始化 Map 为对象
        },
        computed: {
            totalPrice() {
                return (parseFloat(this.UNIT_PRICE) || 0) * (parseFloat(this.AMOUNT) || 0);
            }
        },
        created(){
            this.GetMap();
        },
        methods: {
            // 异步请求获取 map 集合数据
            GetMap(){
                const findId = sessionStorage.getItem('id');
                axios.get(`/put/getbyid?id=${findId}`)
                    .then(response => {
                        this.Map = response.data.data; // 直接赋值给 Map
                        // 初始化可编辑字段的值
                        this.END_DATE = this.formatDate(this.Map['END_DATE']) || '';
                        this.UNIT_PRICE = this.Map['UNIT_PRICE'] || '';
                        this.AMOUNT = this.Map['AMOUNT'] || '';
                        this.START_DATE = this.formatDate(this.Map['START_DATE']) || '';
                        this.REMARK = this.Map['REMARK'] || '';
                        this.ENQUIRE_NAME = this.Map['ENQUIRE_NAME'] || '';
                        this.LINKMAN = this.Map['LINKMAN'] || '';
                        this.ADDRESS = this.Map['ADDRESS'] || '';
                        this.PHONE = this.Map['PHONE'] || '';
                        this.FAX = this.Map['FAX'] || '';
                        this.ZIP = this.Map['ZIP'] || '';
                        this.EMAIL = this.Map['EMAIL'] || '';
                    })
                    .catch(error => {
                        console.error('报错啦!!!!没有搜索成功!!!', error);
                    });
            },
            // 通过 key 获取 Map 中的值
            getValue(key){
                return this.Map[key] || 'key not found';
            },
            // 格式化日期为 yyyy-MM-dd
            formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                return `${year}-${month}-${day}`;
            },
            confirmSubmit() {
                if (confirm("您确定信息正确并保存吗？")) {
                    const updatedData = {
                        END_DATE: this.END_DATE,
                        UNIT_PRICE: this.UNIT_PRICE,
                        AMOUNT: this.AMOUNT,
                        START_DATE: this.START_DATE,
                        REMARK: this.REMARK,
                        ENQUIRE_NAME: this.ENQUIRE_NAME,
                        LINKMAN: this.LINKMAN,
                        ADDRESS: this.ADDRESS,
                        PHONE: this.PHONE,
                        FAX: this.FAX,
                        ZIP: this.ZIP,
                        EMAIL: this.EMAIL,
                        ID: sessionStorage.getItem('id')
                    };
                    axios.post('put/update', updatedData)
                        .then(response => {
                            alert("提交成功！");
                        })
                        .catch(error => {
                            console.error("提交失败：", error);
                            alert("提交失败，请重试！");
                        });
                }
            },
            goBack() {
                history.back();
            }
        }
    });
</script>
</body>
</html>